<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Account</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/dropdown.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/css/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src="/js/account.js"></script>

    <!-- ace settings handler -->
    <script src="/js/ace-extra.min.js"></script>
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

</head>

<body>
<div th:replace="/catalog/header"></div>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
                <li ><a href="/catalog/main">
                    <i class="glyphicon glyphicon-globe" aria-hidden="true"> </i>
                    Main </a></li>

                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="glyphicon glyphicon-check" aria-hidden="true"> </i>
                        Manage
                        <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/order/allOrder">Order</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/catalog/item">Catalog</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/account/account">Account</a></li>
                    </ul>
                </li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                        <i class="glyphicon glyphicon-user" aria-hidden="true"> </i>
                        Manager
                        <span class="sr-only">(current)</span>
                        <span class="caret"></span>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="/manager/profile">Check</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/manager/managerchange">Change</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <!--搜索框-->
            <!--
            <form class="navbar-form navbar-right" name="searchAccount" th:action="/account/searchAccount" method="post">
                <input type="text" id="keyword" name="keyword" class="form-control" placeholder="Search...">
                <button type="submit" class="btn btn-default" name="searchAccount" value="search">Search</button>
            </form>
            -->
            <form class="navbar-form navbar-right" action="/account/accountSearch" method="post">
                <input id="keyword" name="keyword" type="text" class="form-control" placeholder="Search...">
                <button id="accountSearch" type="submit" class="btn btn-default">Search</button>
            </form>
<!--            <div class="navbar-form navbar-right">-->
<!--                <input id="keyword" type="text" class="form-control" placeholder="Search...">-->
<!--                <button id="accountSearch" type="button" class="btn btn-default">Search</button>-->
<!--            </div>-->

            <h1 class="page-header">Account</h1>
            <!--删除成功提示栏-->
<!--            <div class="alert alert-success alert-dismissable" id="remind" style="display:none;">-->
<!--                <button type="button" class="close" data-dismiss="alert"-->
<!--                        aria-hidden="true">-->
<!--                    &times;-->
<!--                </button>-->
<!--                An Account information was successfully deleted.-->
<!--            </div>-->
            <!--Account表-->
            <div class="table-responsive">
                <table id="account_table" class="table table-striped">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>Account</th>
                        <th>Email</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Status</th>
                        <th>Address1</th>
                        <th>Address2</th>
                        <th>City</th>
                        <th>State</th>
                        <th> Zip</th>
                        <th>Country</th>
                        <th>Phone</th>
                        <th>Operate</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="account:${session.accountList}">
                        <td th:text="${accountStat.count}">001</td>
                        <td id="account" th:text="${account.username}">1,001</td>
                        <td id="email" th:text="${account.email}">Lorem</td>
                        <td id="firstName" th:text="${account.firstName}">ipsum</td>
                        <td id="lastName" th:text="${account.lastName}">dolor</td>
                        <td id="status" th:text="${account.status}">sit</td>
                        <td id="address1" th:text="${account.address1}">Lorem</td>
                        <td id="address2" th:text="${account.address2}">ipsum</td>
                        <td id="city" th:text="${account.city}">Lorem</td>
                        <td id="state" th:text="${account.state}">ipsum</td>
                        <td id="zip" th:text="${account.zip}">1,001</td>
                        <td id="country" th:text="${account.country}">Lorem</td>
                        <td id="phone" th:text="${account.phone}">ipsum</td>
                        <td>
                            <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" onclick="edit(this)">Edit</button>
<!--                            <button type="button" class="btn btn-link" onclick="delete_confirm(this)">Delete</button>-->
                            <button type="button" class="btn btn-link fa-trash-o" id="deleteAccount">Delete</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="row">
                    <div class="col-sm-6 col-sm-offset-4">
                        <ul class="pagination">
                            <li><a href="#">&laquo;</a></li>
                            <li class="active"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content"  style="width: 550px">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        Account Information Editing
                    </h4>
                </div>
                <div class="modal-body" style="height: 380px;">
                        <form class="navbar-form navbar-left" action="/account/accountChange" method="post">
                            Account:<input type="text" class="form-control" style="width: 150px"  name="username" id="modal_account"><span></span>
                            Email:<input type="text" class="form-control" style="width: 150px"  name="email" id="modal_email"><br>
                            <p></p>
                            First Name:<input type="text" class="form-control" style="width: 150px" name="firstName" id="modal_firstName"><span></span>
                            Last Name:<input type="text" class="form-control" style="width: 150px" name="lastName" id="modal_lastName"><br>
                            <p></p>
                            Status:<input type="text" class="form-control" style="width: 150px" name="status" id="modal_status"><span></span>
                            Address1:<input type="text" class="form-control" style="width: 150px" name="address1" id="modal_address1"><br>
                            <p></p>
                            Address2:<input type="text" class="form-control" style="width: 150px" name="address2"  id="modal_address2"><span></span>
                            City:<input type="text" class="form-control" style="width: 150px" name="city" id="modal_city"><br>
                            <p></p>
                            State:<input type="text" class="form-control" style="width: 150px" name="state" id="modal_state"><span></span>
                            Zip:<input type="text" class="form-control" style="width: 150px" name="zip" id="modal_zip"><br>
                            <p></p>
                            Country:<input type="text" class="form-control" style="width: 150px" name="country" id="modal_country"><span></span>
                            Phone:<input type="text" class="form-control" style="width: 150px" name="phone" id="modal_phone"><br>
                            <p></p>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    Apply
                                </button>
                            </div>

                        </form>
                </div>
<!--                <div class="modal-footer">-->
<!--                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel-->
<!--                    </button>-->
<!--                    <button type="submit" class="btn btn-primary">-->
<!--                        Apply-->
<!--                    </button>-->
<!--                </div>-->
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="/js/vendor/jquery.min.js"><\/script>')</script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.jqGrid.min.js"></script>
<script src="/js/grid.locale-en.js"></script>
<script src="/js/vendor/holder.min.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>



<!--[if !IE]> -->
<script src="/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
    if('ontouchstart' in document.documentElement) document.write("<script src='/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<!-- page specific plugin scripts -->
<script src="/js/bootstrap-datepicker.min.js"></script>
<script src="/js/jquery.jqGrid.min.js"></script>
<script src="/js/grid.locale-en.js"></script>
<!-- ace scripts -->
<script src="/js/ace-elements.min.js"></script>
<script src="/js/ace.min.js"></script>



<script type="text/javascript">
    $(document).ready(function () { //此处页面打开即请求api
        $('#account_table').delegate('.fa-trash-o','click',function(){
            var accountname = $(this).closest('tr').find("td[id='account']").text();
            $.ajax({
                type:"get",
                url:"/account/accountDelete",
                data:{
                    "accountname":accountname
                },
                dataType:"text",

                success:function(data){
                    if (data == "fail"){

                    }else {
                        console.log(data);
                        window.location.href = "/account/account";//指向登录的页面地址
                    }
                }
            });
        });

        // $('#accountSearch').on('click',function (e) {
        //
        //     var keyword= $('#keyword').val();
        //     var grid_selector = "#account_table";
        //     jQuery(grid_selector).jqGrid('clearGridData');
        //     jQuery(grid_selector).jqGrid('setGridParam',{
        //         url:'/account/accountSearch',//请求数据的地址
        //         datatype: "json",
        //         postData : {
        //             keyword :keyword
        //             //$("keyword").innerText
        //         },
        //         height: 450,
        //
        //     }).trigger('reloadGrid');
        // });

    });

    // jQuery(function($) {
    //
    //     // var tabIndex = 1;
    //     var grid_selector = "#account_table";
    //
    //     jQuery(grid_selector).jqGrid({
    //
    //         url:'/account/accountSearch',//请求数据的地址
    //         datatype: "json",
    //         postData : {
    //             keyword :"123"
    //             //$("keyword").innerText
    //         },
    //         height: 450,
    //         colNames:['序号', 'Account','Email','First Name', 'Last Name', 'Status', 'Address1', 'Address2', 'City', 'State', 'Zip', 'Country', 'Phone', 'Operate'],
    //         colModel:[
    //             {name:'count',index:'', width:80, fixed:true, sortable:false, resize:false,
    //                 formatter:'actions',
    //                 formatoptions:{
    //                     keys:true,
    //                     //delbutton: false,//disable delete button
    //
    //                     delOptions:{recreateForm: true},
    //                     //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
    //                 }
    //             },
    //             {name:'account',index:'account', width:120, editable: false},
    //             {name:'email',index:'email',width:120, editable:true, edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
    //             {name:'firstName',index:'firstName', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'lastName',index:'lastName', width:450, editable: true,editoptions: {size:"20",maxlength:"50"}},
    //             {name:'status',index:'status', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'address1',index:'address1', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'address2',index:'address2', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'city',index:'city', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'state',index:'state', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'zip',index:'zip', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'country',index:'country', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'phone',index:'phone', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //             {name:'operate',index:'operate', width:200,editable: true,editoptions:{size:"20",maxlength:"30"}},
    //         ],
    //
    //         viewrecords : true,
    //         rowNum:10,
    //         rowList:[10,20,30],
    //
    //         altRows: true,
    //         //toppager: true,
    //
    //         multiselect: true,
    //         //multikey: "ctrlKey",
    //         multiboxonly: true,
    //
    //         loadComplete : function() {
    //             var table = this;
    //             setTimeout(function(){
    //                 styleCheckbox(table);
    //                 enableTooltips(table);
    //             }, 0);
    //         },
    //
    //     });
    //

        // $("#tab-submit").on('click', function () {
        //     if (tabIndex === 1) {
        //         alert(tabIndex);
        //         $("#tab_form1").submit();
        //     } else if (tabIndex === 2) {
        //         $("#tab_form2").submit();
        //         alert(tabIndex);
        //     } else if (tabIndex === 3) {
        //         $("#tab_form3").submit();
        //         alert(tabIndex);
        //     }
        // });
        //
        // $("#tab_1").on('click', function () {
        //     tabIndex = 1;
        // });
        //
        // $("#tab_2").on('click', function () {
        //     tabIndex = 2;
        //
        // });
        //
        // $("#tab_3").on('click', function () {
        //     tabIndex = 3;
        //
        // });
    // });

</script>
</body>
</html>